<template>
  <el-card shadow="never">
    <template #header>
      <div class="flex justify-between h-3">
        <span>通知公告</span>
      </div>
    </template>
    <el-skeleton :loading="loading" animated>
      <div v-for="(item, index) in notice" :key="`dynamics-${index}`">
        <div class="flex flex-col">
          <div class="flex">
            <dict-tag :type="DICT_TYPE.SYSTEM_NOTICE_TYPE" :value="item.type" />
            <span class="ml-10px flex-1">{{ item.title }}</span>
            <span class="ml-10px text-12px"> {{ formatTime(item.createTime, 'yyyy-MM-dd') }}</span>
          </div>
          <div class="mt-15px text-12px text-gray-400" v-html="item.content"></div>
        </div>
        <el-divider v-if="index !== notice.length - 1" />
      </div>
    </el-skeleton>
  </el-card>
</template>
<script lang="ts" setup>
import * as NoticeApi from '@/api/system/notice'
import { DICT_TYPE } from '@/utils/dict'
import { formatTime } from '@/utils'

defineOptions({ name: 'NoticeCard' })

/** 查询公告列表 */
const loading = ref(true) // 加载中
const notice = ref<any>([])
const getNoticeList = async () => {
  loading.value = true
  try {
    notice.value = await NoticeApi.getNoticeList(2)
  } finally {
    loading.value = false
  }
}

/** 初始化 **/
onMounted(async () => {
  await getNoticeList()
})
</script>
